<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/common.css"/>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>

<body>

<div class="page">

    <div class="content">


        <div>
            <input type="button" value="测试事件捕获"/>
        </div>
        <p>
            事件冒泡则依次弹出”red“,"green","yellow"。//
        </p>
        <pre>

        el.addEventListener("click",function(e){


        },true);//true：事件捕获，一层一层往内捕捉。由外到内依次触发被监听的元素
                //false：冒泡，由内往外冒泡泡（事件）。

         停止事件进行传递——拦截：e.stopPropagation();


        </pre>
        <br>
        ie说明：
        在 IE 下面绑定一个事件监听，在 IE9之前的版本中无法使用标准的 addEventListener 函数，而是使用自家的 attachEvent，具体用法：element.attachEvent(event-name,
        callback);它只支持监听在冒泡阶段触发的事件，所以为了统一，在使用标准事件监听函数的时候，第三参数传递 false。
        </br>

        <div>
            更多请参考：<a href="https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/events.html">https://leohxj.gitbooks.io/front-end-database/content/javascript-basic/events.html</a>
        </div>
    </div>


</div>
<script>


    var $input = document.getElementsByTagName("input")[0];
    var $div = document.getElementsByTagName("div")[0];
    var $body = document.getElementsByTagName("body")[0];

    $input.addEventListener("click", function (e) {
        this.style.border = "5px solid red"
        var e = e || window.e;

        alert("red")
    }, true);//事件捕获，一层一层往内捕捉
    $div.addEventListener("click", function (e) {
        this.style.border = "5px solid green"
        alert("green")
    }, true);

    $body.addEventListener("click", function (e) {
        this.style.border = "5px solid yellow"
        alert("yellow")
    }, true);

</script>
</body>

</html>